<template style="height: 100%">
  <div>
    <view>
      <swiper :indicator-dots="indicatorDots"
              :indicator-color="indicatorColor"
              :indicator-active-color="indicatorActiveColor"
              :autoplay="autoplay"
              :interval="interval"
              :duration="duration"
              :vertical="vertical"
              :bindchange="changeSubject"
              v-bind:style="{width:'100%', height: '250px' }"
      >
        <block :wx:for="imgUrls" wx:key="*this">
          <swiper-item>
            <image :src="item" mode='aspectFill' class="slide-image"
                   v-bind:style="{width:'100%', height: '100%'}"/>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <view>
      <i-tabs :current="current_scroll" scroll @change="handleChangeScroll()">
        <i-tab key="tab1" title="恋爱游戏"></i-tab>
        <i-tab key="tab2" title="活动"></i-tab>
      </i-tabs>
    </view>
    <view>
      <div class="bg">
        <p style="padding-top:10px;padding-left:10px;clear: both;overflow:hidden;">
          <span class="sss">推荐必玩</span>
          <span class="ssa">54期</span>
        </p>
        <p class="ssb">48小时恋爱体验，分享领取恋爱助力资金。</p>
        <div class="ssr">
          <p class="ss"><span class="ss-s">22122</span>人玩过</p>
          <p class="ss"><span class="ss-s" style="color: #e79ead">查看活动介绍>> </span></p>
         </div>
      </div>
    </view>
    <view>
      <div class="bg" style="background-color: #000">
        <p style="padding-top:10px;padding-left:10px;clear: both;overflow:hidden;">
          <span class="sss">推荐必玩</span>
          <span class="ssa">54期</span>
        </p>
        <p class="ssb">48小时恋爱体验，分享领取恋爱助力资金。</p>
        <div class="ssr">
          <p class="ss"><span class="ss-s">22122</span>人玩过</p>
          <p class="ss"><span class="ss-s" style="color: #e79ead">查看活动介绍>> </span></p>
        </div>
      </div>
    </view>
  </div>

</template>
<script>
  export default {
    mpType: 'actions',
    data() {
      return {
        imgUrls: [
          'http://img.hb.aicdn.com/f39fedf7bd25f6c44afd28140670b80fe464e7af6aff32-DuZmQj_/fw/480',
          'http://img.hb.aicdn.com/074b0d82d63cd00c5b19f22b8f340c0adbdd886a7f5e6-hb2dbk_/fw/480',
          'http://img.hb.aicdn.com/074b0d82d63cd00c5b19f22b8f340c0adbdd886a7f5e6-hb2dbk_/fw/480'
        ],
        height: '700',
        indicatorDots: true,
        vertical: false,
        autoplay: true,
        interval: 5000,
        duration: 1000,
        indicatorColor: '#999',
        indicatorActiveColor: '#fff',
        client: {
          width: 0,
          height: 0
        },
        current_scroll: 'tab2'
      }
    },
    components: {},
    computed() {
      let self = this
      wx.getStorage({
        key: 'currentPage',
        success(res) {
          let mp = {'detail': {'key': res.data}}
          self.handleChange({mp})
        }
      })

    },
    mounted() {
    },
    methods: {
      handleChangeScroll({detail}) {
//        this.setData({
//          current_scroll: detail.key
//        });
      },
      money() {
        wx.navigateTo({
          url: 'mCard'
        })
      },
      getUserInfo() {
        // 调用登录接口
        wx.login({
          success: () => {
            wx.getUserInfo({
              success: (res) => {
                this.userInfo = res.userInfo
              }
            })
          }
        })
      },

      clickHandle(msg, ev) {
        console.log('clickHandle:', msg, ev)
      }
    },
    created() {
      // 调用应用实例的方法获取全局数据
      this.getUserInfo()
    }
  }
</script>

<style scoped>
  .sss {
    background-color: #e79ead;
    width: 100px;
    height: 30px;
    border-radius: 10px;
    display: block;
    line-height: 30px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    float: left;

  }

  .ss-s {
    color: #333;
    margin-left: 10px;
    margin-right: 5px;
  }

  .ss {
    color:#ccc;
    font-size:29rpx;
    width:50%;
    float:left;
    line-height:60rpx;
    text-align:center;

  }

  .ssa {
    width: 107px;
    height: 26px;
    border: 2px solid #e79ead;
    border-radius: 10px;
    display: block;
    line-height: 28px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    float: right;
    margin-right: 10px;

  }

  .ssr {
    height: 60rpx;
    background-color: #fff;
    border-radius: 0 0 10px 10px;

  }

  .ssb {
    clear:both;
    padding:28rpx 20rpx 20rpx 30rpx;
    font-size:38rpx;
    color:#fff;
    font-weight:bold;
  }

  .bg {
    background-color:#f3b9c5;
    width:90%;
    margin:40rpx auto 40rpx;
    height:293rpx;
    border-radius:20rpx;
    border:1px solid #efefef;


  }

  .plr-20 {
    padding: 0 20rpx;
    overflow: hidden;
  }

  .header {
    height: 270rpx;
    background-color: #f993a6;
    overflow: hidden;
    padding-top: 10%;
  }

  .left {
    float: left;
  }

  .btn-style {
    border: 1px solid #777;
    color: #777;
    font-size: 22rpx;
    border-radius: 20rpx;
    text-align: center;
    width: 150rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
  }

  .btn-style-center {
    float: right;
    margin-right: 24rpx;
  }

  .fontNorwal {
    color: #fff;
    font-size: 26rpx;
  }

  .fontBig {
    color: #fff;
    font-size: 36rpx;
  }

  .wx-cards-17 {
    border: 2rpx solid #d994a2;
    background-color: #fff;
    color: #ee7091;
    border-radius: 30rpx;
    text-align: center;
    display: block;
    height: 55rpx;
    line-height: 55rpx;
    font-size: 26rpx;
    width: 231rpx;
    margin-top: 20rpx;
  }
</style>
